<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<view class="content-wrap bg-F7F8FF">
			<view class="input-item fboxRow Ycenter Xcenter input-inner bg-base" v-if="config[pageType].type == 'input'">
				<input v-model="fromData[pageType]" class="uni-input font28" placeholder-style="color:#969699" :placeholder="config[pageType].placeholder" />
			</view>
			<view class="input-item input-text bg-base" v-else>
				<textarea
					class="uni-input font28"
					v-model="fromData[pageType]"
					placeholder-style="color:#969699"
					:placeholder="config[pageType].placeholder"
					:maxlength="config[pageType].maxlength"
				/>
				<view class="count fboxRow Ycenter Xend font24 color-969699">{{ (fromData[pageType] && fromData[pageType].length) || 0 }}/{{config[pageType].maxlength}}</view>
			</view>
			<view class="input-tips fboxRow Ycenter font24 color-969699">{{ config[pageType].tips }}</view>
		</view>
		<BottomBtn title="保存" @btnClick="verifyTap"></BottomBtn>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { strTrim } from '@/static/js/common.js';
import { editMixins } from './edit.mixins.js';
export default {
	mixins: [editMixins],
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			fromData: {
				companyName: '',
				memberSynopsis: '',
				memberProfile: '',
				positionName: '',
				canProvide: '',
				need: '',
				realName: '',
			},
			config: {
				realName: {
					type: 'input',
					title: '真实姓名',
					placeholder: '请输入自己真实姓名',
					tips: '请输入自己真实姓名，实名认证后不能修改。'
				},
				companyName: {
					type: 'input',
					title: '单位名称',
					placeholder: '请输入单位名称',
					tips: '请输入单位名称。'
				},
				positionName: {
					type: 'input',
					title: '职位',
					placeholder: '请输入你的职位',
					tips: '请输入你的职位。'
				},
				memberSynopsis: {
					type: 'textarea',
					title: '设置提要词',
					placeholder: '请输入提要词',
					maxlength: 20,
					tips: '请输入提要词，限20字。'
				},
				memberProfile: {
					type: 'textarea',
					title: '个人简介',
					maxlength: 500,
					placeholder: '请输入个人简介',
					tips: '请输入个人简介，限500字。'
				},
				canProvide: {
					type: 'textarea',
					title: '提供的服务',
					placeholder: '请输入自己能提供的服务',
					maxlength: 200,
					tips: '请输入自己能提供的服务，限200字。'
				},
				need: {
					type: 'textarea',
					title: '需要的服务',
					maxlength: 200,
					placeholder: '请输入自己需要的服务',
					tips: '请输入自己需要的服务，限200字。'
				}
			},
			pageType: 'companyName'
		};
	},
	onLoad(option) {
		if (option && option.type) {
			this.pageType = option.type;
		}
		uni.setNavigationBarTitle({
			title: this.config[this.pageType].title
		});
	},
	methods: {
		verifyTap() {
			this.putInfo();
			// const value = this.fromData[this.pageType];
			// if (strTrim(value)) {
			// 	this.putInfo();
			// } else {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: this.config[this.pageType].placeholder
			// 	});
			// }
		}
	}
};
</script>

<style lang="scss" scoped>
.content-wrap {
	min-height: 100vh;
}
.input-inner {padding: 40rpx;}
.input-inner .uni-input {
	padding: 0 20rpx;
	width: 630rpx;
	height: 88rpx;
	// line-height: 46rpx;
	border-radius: 12rpx;
	background-color: var(--viewBgColor);
}
::v-deep .uni-textarea-textarea {
	border-radius: 12rpx;
	padding: 10rpx;
}
::v-deep .uni-textarea-placeholder {
	left: 12rpx;
}
.input-tips {
	padding: 0 40rpx;
	color: var(--contentFontFourColor);
}
.input-text {
	padding: 40rpx;
}
.count {
	margin-top: 15rpx;
}
.input-text .uni-input {
	padding: 0 20rpx;
	padding-top: 15rpx;
	width: 630rpx;
	height: 220rpx;
	// line-height: 46rpx;
	border-radius: 12rpx;
	background-color: var(--viewBgColor);
}
</style>
